<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

<div id="app">
    {{message}} 
    <p v-html="rawHtml"></p>
    <div v-bind:class="redColor">这里使用v-bind属性为html标签绑定CSS样式</div>

    <p>接下来是VUE中使用javascript脚本</p>

    <p>{{ number+1 }}</p>
    <p>{{1==1 ? 'YES':'NO' }}</p>
    <p>{{ message.split('').reverse().join('') }}</p>
</div>
<div id="app2" v-once>
    {{name}} 
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello。双大括号赋值是Mustache语法',
            rawHtml: '<span style="color:red">这是内嵌的一个html标签，使用v-html语法</span>',
            redColor: 'redColor',
            number: 10
        }
    })
    var app2 = new Vue({
        el: '#app2',
        data: {
            name: 'v-once是常量，不会动态变化'
        }
    })
    app2.name='hello,world'

</script>

<style type="text/css">
.redColor{color:red;}
.blueColor{color:blue;font-size: 100px;}
</style>
